<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>编辑</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../../assets/i/favicon.png" />
    <link rel="stylesheet" href="../../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../../assets/css/basic.css" />
    <link rel="stylesheet" href="../../assets/css/app.css" />
    <style>
        header, header div{ height: 44px !important; }
        header div a{ display: inline-block; height: 44px !important; line-height: 44px; font-size: 1.8rem; }
        header h1{ padding: 8px; }
        .am-with-topbar-fixed-bottom{ padding-bottom: 140px; }
        .am-list-news-default{ margin: 10px 0; }
        .am-list-news-bd ul.am-list li{ padding-left: 10px; }
        .am-list-date{ left: 15px; color: #333333 !important; }
        .am-list .am-list-item-dated a{ padding: 0 0 0 80px; color: #333333; white-space: normal; }
        .am-text-sm{ margin: 0; color: #666666; }
        aside{ text-align: center; }
        li.am-g{ padding-left: 1em; }
        h3.am-text-xl{ font-size: 2.0rem; margin: 0; }
        .am-nav-kuai, .am-list-news-default{ margin: 0; }
        #admin-part{ background-color: #fff; }
        .am-list-news-hd{ padding-bottom: 0; }
        .am-sm-2{ display: inline-block; width: 50%; margin: 0; }
        #kuaikuai-user-wrapper{ margin-top: 10px; }
        .am-list-news-bd ul.am-list li{ padding: 10px !important; }

        .am-pagination>li>a{ padding: 1em; text-align: center; }
        li.am-g h3.am-text-lg{ margin: 5px 0; }
    </style>
</head>
<body class="am-with-topbar-fixed-bottom">
<header class="am-header am-header-default">
    <div class="am-header-left am-header-nav">
        <a href="#" class=""><i class="icon-left"></i>返回</a>
    </div>
    <div class="am-header-right am-header-nav">
        <a href="#" class="">编辑</a>
    </div>
</header>

<nav id="kuaikuai-admin" class="am-menu-default am-nav-kuai">
    <ul class="am-list">
        <!--缩略图在标题左边-->
        <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
            <aside class="am-u-sm-3 am-list-thumb">
                <img class="am-circle" src="../../assets/i/examples/user.png" alt="" />
                <h3 class="am-text-xl">李强</h3>
            </aside>
            <section class="am-u-sm-9 am-list-main">
                <h3 class="am-text-lg">13631663910</h3>
                <h3 class="am-text-sm"><b>粤B O555O</b></h3>
                <h3 class="am-text-sm"><b>奥迪A6  2014款 TFSI 基本型</b></h3>
                <h3 class="am-text-sm"><a>切换其他车辆</a></h3>
            </section>
        </li>
    </ul>

    <div class="am-modal am-modal-no-btn am-modal-out" id="my-popup">
        <div class="am-modal-dialog">
            <div class="am-modal-bd">
                <ul class="am-list" id="select-gallery">
                    <li class="am-g am-list-item-dated">
                        <a href="#" class="am-list-item-hd">粤B 7374A<i class="r-btn rg"></i></a>
                    </li>
                    <li class="am-g am-list-item-dated">
                        <a href="#" class="am-list-item-hd">粤B 7374B<i class="r-btn"></i></a>
                    </li>
                    <li class="am-g am-list-item-dated">
                        <a href="#" class="am-list-item-hd">粤B 7374C<i class="r-btn"></i></a>
                    </li>
                </ul>

                <section id="select-btn" class="kuaikuai-btn-lg">
                    <button type="submit" class="btn am-btn am-btn-success am-btn-sm am-btn-block">选择</button>
                </section>
            </div>
        </div>
    </div>
</nav>

<section id="ad-part">
    <ul class="am-list">
        <li class="am-g">
            <h3 class="am-text-lg am-u-sm-8" style="padding-left: 1.5em;" id="key">钥匙号：<span class="keynum"></span></h3>
            <div class="am-u-sm-4" style="text-align: right;"><button type="submit" class="btn am-btn am-btn-danger am-btn-sm " id="cle">清除</button></div>
        </li>
    </ul>
    <ul data-am-widget="pagination" class="am-pagination am-pagination-default am-avg-sm-5">
        <li class="">
            <a href="#" class="">1</a>
        </li>
        <li class="">
            <a href="#" class="">2</a>
        </li>
        <li class="">
            <a href="#" class="">3</a>
        </li>
        <li class="">
            <a href="#" class="">4</a>
        </li>
        <li class="">
            <a href="#" class="">5</a>
        </li>
        <li class="">
            <a href="#" class="">6</a>
        </li>
        <li class="">
            <a href="#" class="">7</a>
        </li>
        <li class="">
            <a href="#" class="">8</a>
        </li>
        <li class="">
            <a href="#" class="">9</a>
        </li>
        <li class="">
            <a href="#" class="">0</a>
        </li>
        <li></li>
    </ul>
</section>

<section id="admin-part">
    <ul class="am-avg-sm-2 am-pagination-centered">
        <li class="bb br">
            <h3 class="am-gallery-title">里程</h3>
            <div class="am-gallery-desc">50000</div>
        </li>
        <li class="bb">
            <h3 class="am-gallery-title">保险到期日期</h3>
            <div class="am-gallery-desc">60000</div>
        </li>
        <li class="br">
            <h3 class="am-gallery-title">下次保养里程</h3>
            <div class="am-gallery-desc">2014-12-8</div>
        </li>
        <li>
            <h3 class="am-gallery-title">下次年审日期</h3>
            <div class="am-gallery-desc">2015-1-12</div>
        </li>
    </ul>
</section>

<div id="kuaikuai-user-wrapper">
    <div data-am-widget="list_news" class="am-list-news">
        <div class="am-list-news-bd">
            <ul class="am-list">
                <li class="am-g am-list-item-dated">
                    <h3 class="am-sm-2">常用饮料</h3>
                    <span class="am-text-sm am-list ">咖啡、果汁</span>
                </li>
                <li class="am-g am-list-item-dated">
                    <h3 class="am-sm-2">常用饮料</h3>
                    <span class="am-text-sm am-list ">咖啡、果汁</span>
                </li>
            </ul>
        </div>
    </div>
</div>

<section id="kuaikuai-reprot">
    <div class="am-list-news">
        <div class="am-list-news-hd am-cf">
            <h2>备注</h2>
        </div>
    </div>
</section>

<div class="am-list-news am-list-news-default">
    <div class="am-list-news-bd">
        <ul class="am-list">
            <li class="am-g am-list-item-dated">
                <span class="am-list-date">2013-09-18</span>
                <a href="##" class="am-list-item-hd ">打算在年底之前给车做一次镀膜，想开车回老家。</a>
            </li>
            <li class="am-g am-list-item-dated">
                <span class="am-list-date">2013-10-14</span>
                <a href="##" class="am-list-item-hd ">打算在年底之前给车做一次镀膜，想开车回老家。</a>
            </li>
            <li class="am-g am-list-item-dated">
                <span class="am-list-date">2013-11-18</span>
                <a href="##" class="am-list-item-hd ">打算在年底之前给车做一次镀膜，想开车回老家。</a>
            </li>
            <li class="am-g am-list-item-dated">
                <span class="am-list-date">2013-11-18</span>
                <a href="##" class="am-list-item-hd ">打算在年底之前给车做一次镀膜，想开车回老家。</a>
            </li>
            <li class="am-g am-list-item-dated">
                <span class="am-list-date">2013-11-18</span>
                <a href="##" class="am-list-item-hd ">打算在年底之前给车做一次镀膜，想开车回老家。</a>
            </li>
            <li class="am-g am-list-item-dated">
                <span class="am-list-date">2013-11-18</span>
                <a href="##" class="am-list-item-hd ">打算在年底之前给车做一次镀膜，想开车回老家。</a>
            </li>
            <li class="am-g am-list-item-dated">
                <span class="am-list-date">2013-11-18</span>
                <a href="##" class="am-list-item-hd ">打算在年底之前给车做一次镀膜，想开车回老家。</a>
            </li>
            <li class="am-g am-list-item-dated">
                <span class="am-list-date">2013-11-18</span>
                <a href="##" class="am-list-item-hd ">打算在年底之前给车做一次镀膜，想开车回老家。</a>
            </li>
            <li class="am-g am-list-item-dated">
                <span class="am-list-date">2013-11-18</span>
                <a href="##" class="am-list-item-hd ">打算在年底之前给车做一次镀膜，想开车回老家。</a>
            </li>
        </ul>
    </div>
</div>

<section id="kuaikuai-btn" class="kuaikuai-btn-lg am-topbar-fixed-bottom">
    <button type="submit" class="btn am-btn am-btn-success am-btn-lg am-btn-block">快快洗车</button>
    <button type="submit" class="btn am-btn am-btn-success am-btn-lg am-btn-block">其他项目（包含套餐）</button>
</section>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="../../assets/js/jquery.min-1.11.1.js" type="text/javascript"></script>
<![endif]-->
<script src="../../assets/js/amazeui.min.js" type="text/javascript"></script>
<script src="../../assets/js/amazeui.widgets.helper.min.js" type="text/javascript"></script>
<script src="../../assets/js/handlebars.min.js" type="text/javascript"></script>
<script src="../../assets/js/kuaikuai.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        var sum = '';
        var arrLi = $('#ad-part ul.am-pagination').find('li');
        for (var i = 0; i < arrLi.length - 1; i++) {
            $(arrLi[i]).on('click', function() {
                if (sum.length == 2) {
                    $('.keynum').text('');
                    sum.length = 0;
                }
                sum = $('.keynum').text() + $(this).find('a').text();
                $('.keynum').html(sum);
            });
        }

        $('#cle').on('click', function() {
            $('.keynum').text('');
        });
    });
</script>
</body>
</html>